<template>
  <div class="article">
    <van-nav-bar title="文章内容" left-arrow @click-left="$router.back()">
      <template #right>
        <van-icon name="more-o" size="18" />
      </template>
    </van-nav-bar>

    <div class="body-container">
      <h1 class="title">{{ articleInfo.title }}</h1>
      <van-cell center class="userInfo">
        <div slot="title" class="userInfo-name">{{ articleInfo.nickname }}</div>
        <van-image
          class="userInfo-avatar"
          slot="icon"
          round
          fit="cover"
          :src="articleInfo.avatar"
        />
        <div class="userInfo-time" slot="label">
          {{ articleInfo.time | relativeTime }}
        </div>
        <van-button
          v-if="!articleInfo.belongSelf"
          class="userInfo-btn"
          round
          plain
          :loading="loading"
          :type="articleInfo.is_followed ? 'primary' : 'info'"
          :icon="articleInfo.is_followed ? 'success' : 'plus'"
          size="small"
          loading-type="spinner"
          @click="setFans"
          >{{ articleInfo.is_followed ? '已关注' : '关注' }}</van-button
        >
      </van-cell>
      <div class="markdown-body" v-html="articleInfo.content"></div>
      <!-- 评论 -->
      <van-cell title="全部评论" ref="comments" />
      <CommentList
        :source="articleId"
        :list="newCommentList"
        @reply-click="onReply"
      />
    </div>

    <!-- 底部     -->
    <div class="bottom-container">
      <van-button
        class="comment-btn"
        type="default"
        round
        size="small"
        icon="edit"
        @click="isCommentShow = true"
        >写 评 论</van-button
      >
      <van-icon
        :info="articleInfo.commentcount"
        name="comment-o"
        @click="jumpClick()"
      />
      <van-icon
        :color="articleInfo.is_collect ? 'red' : '#000'"
        :name="articleInfo.is_collect ? 'star' : 'star-o'"
        @click="setCollect"
      />
      <van-icon
        :color="articleInfo.is_praise ? 'red' : '#000'"
        :name="articleInfo.is_praise ? 'good-job' : 'good-job-o'"
        @click="setPraise"
      />
      <van-icon name="share" />
    </div>
    <!-- 文章评论弹出层 -->
    <van-popup v-model="isCommentShow" position="bottom">
      <PostComment
        :orId="articleId"
        @update-comments="updateNewComment"
        @update-commentscount="articleInfo.commentcount++"
      />
    </van-popup>
    <!-- 回复弹窗 -->
    <van-popup
      v-model="isReplyShow"
      position="bottom"
      :close-on-click-overlay="false"
    >
      <CommentReply
        v-if="isReplyShow"
        :comment="replyComment"
        :articleId="articleInfo.id"
        @colose-reply="isReplyShow = false"
      />
    </van-popup>
  </div>
</template>
<script>
import './github-markdown.css'
import {
  getArtilceInfo,
  addArticlePraise,
  delArticlePraise,
  addArticleCollection,
  delArticleCollection
} from '@/api/article'
import { Toast } from 'vant'
import { setAttentionStatus } from '@/api/fans'
import CommentList from './components/comment-list'
import PostComment from './components/post-comment'
import CommentReply from './components/comment-reply'
export default {
  name: 'articleInfo',
  data () {
    return {
      articleInfo: '',
      loading: false,
      isCommentShow: false,
      isReplyShow: false,
      newCommentList: [],
      replyComment: {}
    }
  },
  created () {
    this.onArticleInfo()
  },
  methods: {
    // 获取文章详情内容
    async onArticleInfo () {
      try {
        const { data } = await getArtilceInfo(this.articleId)
        this.articleInfo = data
      } catch (error) {
        return error
      }
    },
    // 改变关注状态
    async setFans () {
      this.loading = true
      try {
        await setAttentionStatus({
          attentionStatus: !this.articleInfo.is_followed,
          beFollower: this.articleInfo.username
        })
        this.articleInfo.is_followed = !this.articleInfo.is_followed
        this.loading = false
      } catch (error) {
        this.loading = false
        return error
      }
    },
    // 改变收藏状态
    async setCollect () {
      Toast.loading({
        message: '加载中...',
        forbidClick: true
      })
      try {
        if (!this.articleInfo.is_collect) {
          await addArticleCollection(this.articleInfo.id)
        } else {
          await delArticleCollection(this.articleInfo.id)
        }
        this.articleInfo.is_collect = !this.articleInfo.is_collect
        Toast.success(
          `${this.articleInfo.is_collect ? '收藏成功' : '已取消收藏'}`
        )
      } catch (error) {
        Toast.fail('收藏失败')
        return error
      }
    },
    // 改变点赞
    async setPraise () {
      Toast.loading({
        message: '加载中...',
        forbidClick: true
      })
      try {
        if (!this.articleInfo.is_praise) {
          await addArticlePraise(this.articleInfo.id)
        } else {
          await delArticlePraise(this.articleInfo.id)
        }
        this.articleInfo.is_praise = !this.articleInfo.is_praise
        Toast.success(`${this.articleInfo.is_praise ? '已点赞' : '已取消点赞'}`)
      } catch (error) {
        Toast.fail('点赞失败')
        return error
      }
    },
    // 更新最新发布评论
    updateNewComment (comment) {
      this.newCommentList.unshift(comment)
      this.isCommentShow = false
    },
    // 回复按钮
    onReply (comment) {
      // console.log(comment)
      this.isReplyShow = true
      this.replyComment = comment
    },
    // 锚点
    jumpClick () {
      this.$refs.comments.scrollIntoView({
        behavior: 'smooth',
        // 定义动画过渡效果， "auto"或 "smooth" 之一。默认为 "auto"
        block: 'center',
        // 定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "start"
        inline: 'nearest'
        // 定义水平方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "nearest"
      })
    }
  },
  components: { CommentList, PostComment, CommentReply },
  props: {
    articleId: {
      type: [Number, String],
      requried: true
    }
  },
  watch: {},
  computed: {},
  mounted () {}
}
</script>

<style lang="less" scoped>
.article {
  .title {
    font-size: 20px;
    padding: 14px;
    color: #3a3a3a;
    background-color: #fff;
  }
  .van-icon-more-o {
    color: white;
  }
  .userInfo {
    background-color: #fff;
    .userInfo-avatar {
      height: 35px;
      width: 35px;
      margin-right: 5px;
    }
    .userInfo-name {
      font-size: 12px;
      color: #303030;
    }
    .userInfo-btn {
      width: 80px;
      height: 30px;
    }
  }
  .markdown-body {
    padding: 14px;
    /deep/ img {
      min-width: 100%;
    }
  }
  .body-container {
    position: fixed;
    top: 46px;
    bottom: 42px;
    overflow-y: auto;
    right: 0;
    left: 0;
    background-color: #fcfdff;
  }
  .bottom-container {
    position: fixed;
    bottom: 0;
    background-color: #fff;
    min-width: 100%;
    display: flex;
    align-items: center;
    padding: 5px 10px;
    justify-content: space-evenly;
    .comment-btn {
      width: 50%;
      background: #f7faff;
      font-size: 14px;
      color: #8e8e8e;
    }
    .van-icon {
      font-size: 18px;
    }
  }
}
</style>
